<template>
  <div class="app_content_container">
    <Breadcrumb :items="['二层子网']" />
    <BaseTable
      ref="baseTableRef"
      :apiUrl="getLayer2SubnetList"
      :columns="columns"
      addText="创建子网"
      :otherQuery="{ orderByColumn: 'create_time' }"
      placeholder="请输入名称"
      height="calc(100vh - 180px)"
      @handleEditOrAdd="$refs.addOrEditRef.open()"
    >
      <template #enabled="{ record }">
        <ga-switch
          :checked-value="1"
          :unchecked-value="0"
          size="mini"
          v-model="record.enabled"
          @change="handleEnabledChange(record, 'enabled')"
        />
      </template>
      <template #isShared="{ record }">
        <ga-switch
          size="mini"
          :checked-value="1"
          :unchecked-value="0"
          v-model="record.isShared"
          @change="handleEnabledChange(record)"
        />
      </template>
      <template #action="{ record }">
        <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
        <ga-link status="danger" @click="handleDelete(record)">删除</ga-link>
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { columns } from "./columns";
import {
  getLayer2SubnetList,
  deleteLayer2Subnet,
  editEnabled,
  editShared,
} from "@/api/layer2subnet";
import { deleteModalWithRefresh } from "@/hooks/useWarningModal";
import addOrEdit from "./addOrEdit.vue";
import { Message } from "@garco-design/web-vue";

// 删除方法
const baseTableRef = ref(null);
const handleDelete = (record) => {
  deleteModalWithRefresh(record, deleteLayer2Subnet, () =>
    baseTableRef.value.fetchData()
  );
};
// 处理方法
const handleEnabledChange = async (record, type) => {
  const { enabled, isShared } = record;
  try {
    const { code } =
      type === "enabled"
        ? await editEnabled(record?.id, { enabled })
        : await editShared(record?.id, { isShared });
    if (code === 20000) Message.success("操作成功");
  } catch (error) {
    baseTableRef.value.fetchData();
  }
};
</script>

<style lang="scss" scoped></style>
